<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Attach a custom data source to the geocoder widget.">
    <meta name="cesium-sandcastle-labels" content="Tutorials,Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
        if(typeof require === "function") {
            require.config({
                baseUrl : '../../../Source',
                waitSeconds : 120
            });
        }
    </script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
var camera = viewer.camera;
var ellipsoid = viewer.scene.globe.ellipsoid;

var baseUrl = 'https://dev.virtualearth.net/REST/v1/Locations/';

function setAddressPoint(position, locationAddress, longitudeDegrees, latitudeDegrees ) {
    viewer.entities.add({
        name : 'Longitude:' + longitudeDegrees.toFixed(4) + ', Latitude: ' + latitudeDegrees.toFixed(4),
        position : position,
        point : {
            pixelSize : 5,
            color : Cesium.Color.RED,
            outlineColor : Cesium.Color.WHITE,
            outlineWidth : 2
        },
        label : {
            text : locationAddress,
            font : '14pt monospace',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth : 2,
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            pixelOffset : new Cesium.Cartesian2(0, -5)
        }
    });
}

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (click) {
    var position = camera.pickEllipsoid(click.position);
    if (Cesium.defined(position)) {
        var cartographic = ellipsoid.cartesianToCartographic(position);
        var longitudeDegrees = Cesium.Math.toDegrees(cartographic.longitude);
        var latitudeDegrees = Cesium.Math.toDegrees(cartographic.latitude);
        var url = baseUrl + latitudeDegrees + "," +longitudeDegrees;
        var promise = Cesium.loadJsonp(url, {
            parameters : {
                key : Cesium.BingMapsApi.getKey()
            },
            callbackParameterName : 'jsonp'
        });

        promise.then(function(result) {
            var resources = result.resourceSets[0].resources;
            if (resources.length === 0) {
                return;
            }
            var locationAddress = resources[0].name;
            if (locationAddress.length > 15) {
                locationAddress = locationAddress.replace(/, /g, '\n');
            }
            setAddressPoint(position, locationAddress, longitudeDegrees, latitudeDegrees);
        }).otherwise(function(error) {
            console.error("ERROR getting address: " + error);
        });
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
    startup(Cesium);
} else if (typeof require === "function") {
    require(["Cesium"], startup);
}
</script>
</body>
</html>
